<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本资料</title>
    <script src="../js/jquery3.6.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../personnel/css/bootstrap.min.css">
    <script src="../personnel/js/bootstrap.min.js"></script>
    <script src="../personnel/js/popper.min.js"></script>
    <link rel="stylesheet" href="css/basic.css">
</head>
<body>
    <div id="vue-div">
        <div class="container-fluid mt-3">
            <div class="row">
                <div class="col-sm-3 p-3  text-white"></div>
                <div class="col-sm-6 p-3  text-white position-relative">
                    <form action="../../upFileServlet" method="post" id="reportXMLform" enctype="multipart/form-data">
                    <div class="img-div position-relative">
                        <img :src="'../../'+user.headImg" alt="头像" id="headImg">
                        <input id="file" type="file" name="upFile" class="file bial1" style="display: block;cursor: pointer">
                    </div>
                    </form>
                    <div class="row mt-3">
                        <button @click="text" class="btn btn-success">上传头像</button>
                        <div class="col p-3  text-muted">姓名：</div>
                        <div class="col-sm-10  text-muted">
                            <p class="mt-3">{{user.userName}}</p>
                        </div>
                    </div>
                    <div class="row mt-3" >
                        <div class="col p-3  text-muted">密码：</div>
                        <div class="col-sm-10  text-muted">
                            <p class="mt-3" >{{user.passWord}}</p>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col p-3  text-muted">部门：</div>
                        <div class="col-sm-10 p-2  text-white">
                            <select class="form-select " id="sel1" name="sellist2" v-model="user.departId" disabled>
                                <option  v-for="d in Department.list" :value="d.departId">{{d.departName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col p-3  text-muted">性别：</div>
                        <div class="col-sm-10 p-3  text-muted" >
                            <div class="row">
                                <p>{{bi = user.gender =="1"?"男":"女" }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col p-3  text-muted">角色：</div>
                        <div class="col-sm-10 p-2  text-white">
                            <select class="form-select" id="sel2" name="sellist2" v-model="user.roleId" disabled>
                                <option value="1">管理员</option>
                                <option value="2">普通员工</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 p-3  text-white"></div>
            </div>
        </div>
    </div>
</body>
<script>
</script>
<script>
    const VueBasic = {
        data() {
            return {
                user:selloginUser(),
                Department:selDepartment(1,10),
                bi:""
            }
        },
        methods:{
            text:function (){
                let file = $("#file").get(0).files[0]
                console.log(file)
                if(file){
                    $("#reportXMLform").submit();
                }else{
                    alert("请点击头像选择上传图片！");
                }
            }
        }
    }
    const app = Vue.createApp(VueBasic).mount('#vue-div');

    /**
     * 获取登录用户
     */
    function selloginUser(){
        let user ;
        $.ajax({
            type: "post",
            url: "../../UserServlet?flag=selloginUser",
            dataType: "json",
            async: false,
            success: function (json) {
                console.log(json)
                user = json
            }
        })
        return user;
    }

    /**
     * 查询部门信息
     */
    function selDepartment(page,limit){
        let list;
        $.ajax({
            type:"post",
            url: "../../departmentServlet?flag=selDep",
            data:{  //请求携带的查询条件 key：value
                "page":page,"limit":limit
            },
            dataType:"json",
            async:false,
            success:function (json){
                console.log(json)
                list = json
            }
        })
        return list;
    }



</script>
</html>
